<template>
  <!-- 观察池.vue -->
  <div class="junior-pool-container">
    <empty-pool v-if="isEmpty"></empty-pool>
    <div class="list" v-else>
      <div v-if="showLoading" class="box-center">
        <atom-loading />
      </div>
      <stock-list v-else :detailTableData="stockList" offsetTop="12.8vw"></stock-list>
    </div>
  </div>
</template>

<script>
import { getWebHQ } from '@/utils';
import { reqJuniorPool, reqBuyStrategy } from '@/apis/pool.api';
import { JUNIOR_POOL_STOCK_STATUS, POOL_LIST } from '@/config/pool';
import EmptyPool from '@/components/detail/EmptyPool.vue';
import StockList from '@/components/detail/StockList.vue';

export default {
  components: {
    EmptyPool,
    StockList,
  },
  data() {
    return {
      showLoading: false,
      stockList: [],
    };
  },
  computed: {
    isEmpty() {
      return !this.stockList.length && !this.showLoading;
    },
  },
  async created() {
    const id = await this.getJuniorId();
    if (id) {
      this.showLoading = true;
      const data = await this.getJuniorPool(id);
      this.sortList(data);
      this.showLoading = false;
    } else {
      this.stockList = [];
    }
  },
  methods: {
    /**
     * 获取观察池id
     */
    async getJuniorId() {
      try {
        const { data } = await reqBuyStrategy({ gpc_id: window.getParam('gpc_id'), gpc_type: 0 });
        if (data && data.pre_gpc_id) {
          return data.pre_gpc_id;
        } else {
          return null;
        }
      } catch (err) {
        this.$toast(err.status_msg ? err.status_msg : '获取观察池id失败');
        return null;
      }
    },

    /**
     * 获取观察池列表
     */
    async getJuniorPool(gpcId) {
      const query = {
        gpc_id: gpcId,
        status: JUNIOR_POOL_STOCK_STATUS,
      };
      try {
        const res = await reqJuniorPool(query);
        if (res.status_code === 0 && res?.data) {
          return res.data;
        } else {
          return [];
        }
      } catch (err) {
        return [];
      }
    },

    /**
     * 列表数据排序
     */
    sortList(list) {
      if (list.length > 0) {
        list.sort((a, b) => (a['add_date'] < b['add_date'] ? 1 : -1));
        list.forEach((item, idx) => {
          item['codeIndex'] = `${item['stock_code']}-${idx}`;
        });
        getWebHQ(list).then(listResult => {
          this.stockList = listResult;
        });
      } else {
        this.stockList = [];
      }
    },
  },
};
</script>

<style lang="less" scoped>

.list {
  min-height: 310px;
  height: auto;
  overflow-x: hidden;
}
.box-center {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
